<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="todo-list-example">
			<form v-on:submit.prevent="addNewTodo">
				<label for="new-todo">Add a todo</label>
				<input v-model="newTodoText" id="new-todo" placeholder="E.g. Feed the cat" />
				<button>Add</button>
			</form>
			<ul>
				<li is="todo-item" v-for="(todo,index) in todos" v-bind:key="todo.id" v-bind:title="todo.title" v-on:remove="todos.splice(index,1)" >
					
				</li>
			</ul>
		</div>	
		<script type="text/javascript">
			Vue.component('todo-item',{
				template:'\
				<li>\
					{{title}}\
					<button v-on:click="$emit(\'remove\')">Remove</button>\
				</li>\
				', 
				props:['title']
			})
			let app=new Vue({
				el:'#todo-list-example',
				data:{
					newTodoText:'',
					todos:[
						{
						        id: 1,
						        title: 'Do the dishes',
						      },
						      {
						        id: 2,
						        title: 'Take out the trash',
						      },
						      {
						        id: 3,
						        title: 'Mow the lawn'
						      }
					],
					newTodoTextId:4
				},
				methods:{
					addNewTodo:function(){
						this.todos.push({
							id:this.newTodoTextId++,
							title:this.newTodoText
						})
						this.newTodoText=''
					}
				}
			})
		</script>	
		<style type="text/css">
			
		</style>
	</body>
</html>
